<!--首页-->
<template>
  <div class="index">
    <img src="../common/images/index_top.png" class="index-top">
    <img src="../common/images/index_active.png" class="index-active" @click="active">
    <div class="index-bags">
      <div class="index-bag">
        <img src="../common/images/index_gold.png" alt="">
        <p>金福袋</p>
        <p>19000~29000积分</p>
        <img src="../common/images/exchange.png" @click="exchange(1)">
      </div>
      <div class="index-bag">
        <img src="../common/images/index_sliver.png" alt="">
        <p>银福袋</p>
        <p>9000积分</p>
        <img src="../common/images/exchange.png" @click="exchange(2)">
      </div>
    </div>
    <img src="../common/images/lucky_bag.png" class="lucky-bag" @click="luckyButton">
  </div>
</template>

<script>
  import popUp from '../components/pop-up'

  export default {
    components: {
      popUp
    },
    data() {
      return {
      }
    },
    methods: {
      // 兑换福袋1
      exchange(num) {
        alert('主页 兑换福袋' + num)
      },
      // 我的福袋按钮
      luckyButton() {
        alert('主页 我的福袋按钮')
      },
      // 跳转活动须知
      active() {
        this.$router.push({path: '/active'})
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '../common/stylus/base.styl'
  .index
    width 100vw
    min-height 100vh
    background url('../common/images/index_bg.png') repeat 100% 100%
    .index-top
      width 100%
      height auto
    .index-active
      width vw(144)
      height auto
      position absolute
      top vw(486)
      left 50%
      margin-left vw(-72)
      z-index 10
    .index-bags
      display flex
      justify-content space-between
      padding 0 vw(40)
      .index-bag
        width vw(336)
        height vw(420)
        background-image url('../common/images/index_layer.png')
        @extend .back-image
        text-align center
        img:nth-of-type(1)
          width vw(256)
          height auto
        img:nth-of-type(2)
          width vw(158)
          height auto
          margin-top vw(15)
        p:nth-of-type(1)
          font-size vw(24)
          font-weight bold
          color #dc3c3c
          margin-top vw(-30)
        p:nth-of-type(2)
          font-size vw(18)
          color #dc3c3c
          margin-top vw(10)
    .lucky-bag
      width vw(395)
      height auto
      display block
      margin 0 auto
</style>
